<template>
  <div class="large-screen-home-left">
    <span class="left-title">实验设备</span>
    <a-row :gutter="[12, 12]" class="left-main">
      <a-col
        :span="8"
        v-for="item in equipmentList"
        :key="item"
        class="left-col"
      >
        <div class="left-item" @click="onClick(item)">
          <span class="left-item-title">{{ item.name }}</span>
          <span class="left-item-content">
            <div style="flex: 2">
              <div class="left-item-info">
                <span class="left-item-label">运行状态</span>
                <span
                  class="left-item-value"
                  :class="item.status === '运行中' ? 'run' : 'offline'"
                  >{{ item.status }}</span
                >
              </div>
              <div class="left-item-info">
                <span class="left-item-label">运行工时</span>
                <span class="left-item-value">{{
                  item.workHours || "--"
                }}</span>
              </div>
              <div class="left-item-info">
                <span class="left-item-label">今日加工</span>
                <span class="left-item-value">{{
                  item.productNumber || 0
                }}</span>
              </div>
            </div>
            <div style="flex: 1">
              <Pie v-if="item" :data="item || {}" />
            </div>
          </span>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
// import { getEquipmentsStatus } from "@/api/large-screen";
import { Polling } from "@/utils/polling";
import Pie from "./pie.vue";

const router = useRouter();

const equipmentList = ref([]);
const getEquipments = async () => {
  try {
    // const res = await getEquipmentsStatus();
    // equipmentList.value = res;
    equipmentList.value = new Array(30).fill().map((_, index) => ({
      id: index + 1,
      name: `设备${index + 1}`,
      status: Math.random() > 0.5 ? "运行中" : "离线",
      workHours: Math.floor(Math.random() * 1000),
      productNumber: Math.floor(Math.random() * 1000),
      progress: Math.floor(Math.random() * 100),
      value: Math.floor(Math.random() * 100),
    }));
  } catch (error) {
    console.error("获取设备状态失败:", error);
  }
};

const onClick = (item) => {
  router.push({
    path: "/large-screen/equipment",
    query: {
      id: item.id,
    },
  });
};
// 轮询
const polling = new Polling(getEquipments, 30000);

onMounted(() => {
  getEquipments();
  polling.start();
});

// 销毁
onBeforeUnmount(() => {
  polling.stop();
});
</script>

<style lang="scss" scoped>
/** 左侧 */
.large-screen-home-left {
  flex: 2;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 16px 30px 20px 20px;
  margin-right: 20px;
  background: url("@/assets/images/large-screen/home/bg1.png") no-repeat;
  background-position: center;
  background-size: 100% 100%;
  /** 标题 */
  .left-title {
    position: relative;
    display: block;
    font-size: 22px;
    font-weight: bold;
    margin: -2px 0 0 50px;
  }

  /** 主体 */
  .left-main {
    position: relative;
    overflow: hidden auto;
    height: calc(100% - 70px);
    padding: 0 10px 0 0;
    margin: 30px 20px 0 0;

    /* 设置滚动条样式 */
    &::-webkit-scrollbar {
      width: 8px; /* 滚动条的宽度 */
      height: 8px; /* 水平滚动条的高度 */
    }
    &::-webkit-scrollbar-thumb {
      background-color: #2765c9; /* 滚动条的颜色 */
      // border-radius: 4px; /* 滚动条的圆角 */
    }
    &::-webkit-scrollbar-thumb:hover {
      background-color: #1f4e94; /* 悬停时滚动条的颜色 */
    }
    &::-webkit-scrollbar-track {
      background-color: transparent; /* 滚动条轨道的颜色 */
      // border-radius: 4px; /* 轨道的圆角 */
    }
    /** n个内容 */
    .left-col {
      height: 200px;
      .left-item {
        cursor: pointer;
        overflow: hidden;
        height: 100%;
        width: 100%;
        background: url("@/assets/images/large-screen/home/bg2.png") no-repeat;
        background-position: center;
        background-size: 100% 100%;
        .left-item-title {
          display: block;
          height: 40px;
          line-height: 50px;
          margin-left: 20px;
        }
        .left-item-content {
          display: flex;
          padding: 5px 20px 0 20px;
          .left-item-info {
            display: flex;
            align-items: center;
            margin-top: 18px;

            .left-item-label {
              display: block;
              font-size: 16px;
              color: #ccc;
            }

            .left-item-value {
              display: flex;
              align-items: center;
              font-size: 16px;
              margin-left: 16px;
            }
            .run,
            .offline {
              &::before {
                content: "";
                display: inline-block;
                width: 8px;
                height: 8px;
                margin-right: 5px;
                border-radius: 8px;
              }
            }
            .run {
              &::before {
                background: #4caf50;
              }
            }
            .offline {
              &::before {
                background: #f44336;
              }
            }
          }
        }
      }
    }
  }
}
</style>
